<template>
        <div>
            <van-swipe class="" :autoplay="3000" indicator-color="white">
                <van-swipe-item  v-for="item of swiper" :key="item.imgSrc">
                    <img :src="item.imgSrc" alt="" class="sw-img">
                </van-swipe-item>
            </van-swipe>
            <ArticleItem :lists="item" v-for="item of lists" :key="item._id"></ArticleItem>
        </div>
</template>

<script>
import ArticleItem from '../../components/ArticleItem';
import { getArticle } from "../../model/index";
    export default {
        components:{ArticleItem},
        data(){
            return{
                lists:[],
                swiper:[]
            }
        },
        async mounted() {
            var listsUrl = "/api/article";
            getArticle(listsUrl).then(res=>{
                this.lists = res.data.res
                this.swiper = res.data.res.slice((this.lists.length-3),(this.lists.length))
            })
        },
    }
</script>

<style>
.van-swipe {
    width: 100%;
    height: 200px;
    text-align: center;
}
.sw-img{
    width: 100%;
    height: 240px;
}
</style>